<template>
  <a-modal
    v-model="isModalVisible"
    title="配置参数"
    @ok="saveAllConfig"
    @cancel="closeModal"
    okText="确定"
    cancelText="取消"
  >
    <!-- 已存在的参数列表 -->
    <div v-for="(param, index) in configParams" :key="index" class="param-row">
      <!-- 展示态 -->
      <template v-if="!param.isEditing">
        <span class="param-text">{{ param.key }}: {{ param.value }}</span>
        <div class="param-actions">
          <a-button type="link" @click="editParam(index)">
            <a-icon type="edit" />
          </a-button>
          <a-button type="link" @click="deleteParam(index)">
            <a-icon type="delete" />
          </a-button>
        </div>
      </template>

      <!-- 编辑态 -->
      <template v-else>
        <a-input v-model="param.key" placeholder="Key" style="width: 40%; margin-right: 8px" />
        <a-input v-model="param.value" placeholder="Value" style="width: 40%" />
        <div class="param-actions">
          <a-button type="link" @click="confirmEdit(index)">
            <a-icon type="check" />
          </a-button>
          <a-button type="link" @click="cancelEdit(index)">
            <a-icon type="close" />
          </a-button>
        </div>
      </template>
    </div>

    <!-- 新增参数区域 -->
    <div v-if="isAdding" class="param-row">
      <a-input v-model="newParam.key" placeholder="Key" style="width: 40%; margin-right: 8px" />
      <a-input v-model="newParam.value" placeholder="Value" style="width: 40%" />
      <div class="param-actions">
        <a-button type="link" @click="confirmAdd">
          <a-icon type="check" />
        </a-button>
        <a-button type="link" @click="cancelAdd">
          <a-icon type="close" />
        </a-button>
      </div>
    </div>

    <!-- 添加参数按钮 -->
    <div class="add-btn-wrapper" v-if="!isAdding">
      <a-button type="dashed" @click="startAdd"> <a-icon type="plus" />添加参数 </a-button>
    </div>
  </a-modal>
</template>

<script>
export default {
  data() {
    return {
      isModalVisible: false,
      isAdding: false,
      configParams: [],
      newParam: {
        key: '',
        value: '',
      },
      currentRecord: null,
    }
  },
  methods: {
    // 开始添加新参数
    startAdd() {
      this.isAdding = true
      this.newParam = { key: '', value: '' }
    },
    // 确认添加新参数
    confirmAdd() {
      if (this.newParam.key && this.newParam.value) {
        this.configParams.push({
          key: this.newParam.key,
          value: this.newParam.value,
          isEditing: false,
        })
        this.isAdding = false
      }
    },
    // 取消添加
    cancelAdd() {
      this.isAdding = false
      this.newParam = { key: '', value: '' }
    },
    // 开始编辑参数
    editParam(index) {
      this.configParams[index].isEditing = true
      // 保存原始值用于取消时恢复
      this.configParams[index].originalKey = this.configParams[index].key
      this.configParams[index].originalValue = this.configParams[index].value
    },
    // 确认编辑
    confirmEdit(index) {
      this.configParams[index].isEditing = false
      delete this.configParams[index].originalKey
      delete this.configParams[index].originalValue
    },
    // 取消编辑
    cancelEdit(index) {
      this.configParams[index].key = this.configParams[index].originalKey
      this.configParams[index].value = this.configParams[index].originalValue
      this.configParams[index].isEditing = false
      delete this.configParams[index].originalKey
      delete this.configParams[index].originalValue
    },
    // 删除参数
    deleteParam(index) {
      this.configParams.splice(index, 1)
    },
    // 添加 Modal 的关闭方法
    closeModal() {
      this.isModalVisible = false
      this.isAdding = false
      this.newParam = { key: '', value: '' }
      // 清空配置参数列表
      this.configParams = []
    },
    // 添加保存所有配置的方法
    saveAllConfig() {
      // 将配置参数转换为标签格式
      const labels = this.configParams.map((param) => `${param.key}:${param.value}`).join(' ')

      // 通知父组件更新数据
      this.$emit('save-config', labels)
      this.closeModal()
    },
  },
}
</script>

<style lang="less" scoped>
.param-row {
  display: flex;
  align-items: center;
  margin-bottom: 12px;

  .param-text {
    flex: 1;
  }

  .param-actions {
    white-space: nowrap;

    .ant-btn {
      padding: 0 4px;
    }
  }
}

.add-btn-wrapper {
  margin-top: 16px;
}
</style>
